<template>
  <div>
    <scroller :show-scrollbar="false">
      <vm-cell label="鸡场名称">
        <input slot="title"
               placeholder="请填写鸡场名称"
               v-model="params.farmName"
               class="input" />
      </vm-cell>

      <vm-cell label="联系人">
        <input slot="title"
               placeholder="请填写联系人"
               v-model="params.contact"
               class="input" />
      </vm-cell>

      <vm-cell label="联系电话">
        <input slot="title"
               placeholder="请填写联系电话"
               v-model="params.contact"
               class="input" />
      </vm-cell>

      <vm-cell label="所在地区"
               :has-arrow="true"
               :title="addressCodeName"
               title-align="left"
               placeholder="选择所在地区"
               @cellClicked="pickAddress"></vm-cell>

      <vm-cell label="详细地址">
        <input slot="title"
               placeholder="请填写详细地址"
               v-model="params.addressDetail"
               class="input" />
      </vm-cell>

      <vm-cell label="养殖品类"
               @cellClicked="cateShow">
        <text slot="title"
              :class="['flex', !product.categoryCode && 'text-muted']">{{categoryName || '请选择养殖品类'}}</text>
        <text class="icon text-muted">&#xe69b;</text>
      </vm-cell>

      <vm-cell label="产品名称">
        <input slot="title"
               placeholder="请填写产品名称"
               v-model="product.productName"
               class="input" />
      </vm-cell>

      <vm-cell label="养殖方式"
               @cellClicked="breedShow">
        <text slot="title"
              :class="['flex', !product.breedType && 'text-muted']">{{selectBreedName || '请选择养殖方式'}}</text>
        <text class="icon text-muted">&#xe69b;</text>
      </vm-cell>

      <vm-cell label="养殖规模">
        <input slot="title"
               type="number"
               :disabled="true"
               placeholder="请填写养殖规模"
               v-model="params.scale"
               class="input" />
        <text>羽</text>
      </vm-cell>

      <vm-cell label="鸡舍数量">
        <wxc-stepper slot="title"
                     default-value="0"
                     step="1"
                     max="10"
                     min="1"
                     class="house-stepper"
                     @wxcStepperValueChanged="stepperValueChange"
                     @wxcStepperValueIsMinOver="stepperMinOver"
                     @wxcStepperValueIsMaxOver="stepperMaxOver"></wxc-stepper>
        <text>栋</text>
      </vm-cell>

      <div v-if="chickHouse.length">
        <text class="p-3 text-muted">鸡舍</text>

        <vm-cell v-for="(house, h) in chickHouse"
                 :key="h"
                 :label="`鸡舍${house.houseNo}`">
          <input slot="title"
                 type="number"
                 placeholder="最大养殖数"
                 v-model="house.houseAmount"
                 class="input" />
        </vm-cell>
      </div>

      <vm-button class="my-3"
                 text="提交"
                 @buttonClicked="sumbit"></vm-button>
    </scroller>

    <select-address :visible.sync="addressVisible"
                    :address-code="params.farmAddressCode"
                    @select="onAddressSelect"></select-address>

    <vm-mask height="600"
             width="560"
             :show-close="true"
             :show.sync="cateVisible">
      <text class="p-3 border-bottom text-muted">请选择养殖品类</text>
      <scroller :show-scrollbar="false">
        <text v-for="(cate, index) in enumCategory"
              :key="index"
              :class="['list-text', selectCateIndex === index && 'list-text-active']"
              @click="onSelectCate(cate, index)">{{cate.name}}</text>
      </scroller>
    </vm-mask>

    <vm-mask height="600"
             width="560"
             :show-close="true"
             :show.sync="breedVisible">
      <text class="p-3 border-bottom text-muted">选择养殖规模</text>
      <scroller :show-scrollbar="false">
        <text v-for="(value, key, index) in enumBreedType"
              :key="index"
              :class="['list-text', selectBreedIndex === index && 'list-text-active']"
              @click="onSelectBreed(value, key, index)">{{value}}</text>
      </scroller>
    </vm-mask>

  </div>
</template>
<script>
import VmButton from '../../components/vm-button.vue'
import VmCell from '../../components/vm-cell.vue'
import SelectAddress from '../../components/select-address.vue'
import VmMask from '../../components/vm-mask.vue'
import { WxcDialog, WxcStepper } from 'weex-ui'
import {
  enumCategory,
  enumBreedType
} from '../../plugins/enumChick'

export default {
  components: { VmButton, VmCell, SelectAddress, VmMask, WxcDialog, WxcStepper },
  props: {},
  data() {
    return {
      params: {
        farmName: '',
        contact: '',
        mobileNo: '',
        farmAddressCode: '',
        addressDetail: ''
      },
      product: {
        categoryCode: '',
        productName: '',
        breedType: ''
      },
      //
      addressVisible: false,
      addressCodeName: '',
      //
      cateVisible: false,
      enumCategory,
      selectCateIndex: -1,
      categoryName: '',
      //
      breedVisible: false,
      enumBreedType: enumBreedType,
      selectBreedIndex: -1,
      selectBreedName: '',
      //
      chickHouse: []
    }
  },
  computed: {},
  watch: {},
  created() { },
  methods: {
    pickAddress() {
      this.addressVisible = true
    },
    onAddressSelect(id, name) {
      this.params.farmAddressCode = id
      this.addressCodeName = name
    },
    // 养殖品类
    cateShow() {
      this.cateVisible = true
    },
    onSelectCate(cate, index) {
      this.selectCateIndex = index
      this.product.categoryCode = cate.id
      this.categoryName = cate.name
      this.cateVisible = false
    },
    // 养殖方式
    breedShow() {
      this.breedVisible = true
    },
    onSelectBreed(value, key, index) {
      this.product.breedType = key
      this.selectBreedIndex = index
      this.selectBreedName = value
      this.breedVisible = false
    },
    // 鸡舍
    deleteHouse(index) {
      this.chickHouse.splice(index, 1)
    },
    addHouse() {
      const houseNo = this.getMaxHouseNo() + 1
      this.chickHouse.push({
        houseNo, houseAmount: '', deleteEnable: true
      })
    },
    getMaxHouseNo() {
      let maxNo = 0
      for (const house of this.chickHouse) {
        if (house.houseNo > maxNo) {
          maxNo = house.houseNo
        }
      }
      return maxNo
    },
    stepperValueChange({ value }) {
      const lastCount = this.chickHouse.length
      if (lastCount < value) {
        this.addHouse()
      } else if (lastCount > value) {
        this.deleteHouse(lastCount - 1)
      }
    },
    stepperMinOver() {
      this.$notice.toast({ message: '最少1个鸡舍' })
    },
    stepperMaxOver() {
      this.$notice.toast({ message: '最多10个鸡舍' })
    },
    // 提交
    sumbit() { }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.icon {
  font-family: alicon;
}
.input {
  flex: 1;
  height: 60px;
  font-size: 30px;
  tint-color: #999;
  // text-align: right;
}
.flex-row {
  flex-direction: row;
  align-items: center;
}
.flex {
  flex: 1;
}
.text-center {
  text-align: center;
}
.align-right {
  align-items: right;
}
.text-muted {
  color: #999;
}
.text-primary {
  color: $primary;
}
.p-3 {
  padding: 30px;
}
.m-3 {
  margin: 30px;
}
.mt-3 {
  margin-top: 30px;
}
.my-3 {
  margin-top: 30px;
  margin-bottom: 30px;
}
.bg-white {
  background-color: #fff;
}
.border-bottom {
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.align-center {
  align-items: center;
}
.list-text {
  padding: 30px;
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.list-text-active {
  color: $primary;
}
.delete-icon {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 10px;
  color: $error;
}
.house-btn {
  padding: 20px;
  border-width: 1px;
  border-color: $border-color;
  border-radius: 6px;
  background-color: #fff;
  font-size: 26px;
  width: 200px;
  text-align: center;
  color: $accent;
}
.house-stepper {
  flex: 1;
}
</style>
